import { useState } from 'react';
import type { YmDataNode } from 'ym-design';
import { YmTree } from 'ym-design';

const DEFAULTTREEDATA: YmDataNode[] = [
  {
    key: '0',
    title: 'parent 0',
    children: [
      { key: '0-0', title: 'parent 0-0' }, //, children: [{ key: '0-0-0', title: 'leaf 0-0-0' }]
      {
        key: '0-1',
        title:
          'parent 0-1 disableCheckbox false 我好多学科萨芬那算的就卡的减法OA发动机阿来得及',
        disableCheckbox: false,
        children: [
          { key: '0-1-0', title: 'leaf 0-1-0' },
          {
            key: '0-1-1',
            title: 'leaf 0-1-1 disableCheckbox',
            disableCheckbox: true,
          },
          { key: '0-1-2', title: 'leaf 0-1-2', isLeaf: true },
          {
            key: '0-1-3',
            title: 'leaf 0-1-3 showCheckableBox false',
            showCheckableBox: false,
          },
        ],
      },
      // {
      //   key: '0-2',
      //   title: 'parent 0-2',
      // }
    ],
  },
];

function CheckAble() {
  const [treeData, setTreeData] = useState<YmDataNode[]>(DEFAULTTREEDATA);
  const [checkedKeys, setCheckedKeys] = useState<string[]>(['0-1', '0-1-1']);

  const handleCheck = (
    checkedKeys: string[],
    info: {
      node: YmDataNode;
      checked: boolean;
      checkedNodes: YmDataNode[];
      nativeEvent: MouseEvent;
      halfCheckedKeys: string[];
    },
  ): void => {
    console.log(
      '--CheckAble--checkedKeys--halfCheckedKeys--:',
      checkedKeys,
      info.halfCheckedKeys,
    );
    setCheckedKeys([...checkedKeys]);
  };

  return (
    <div className="tree-page">
      <div style={{ marginBottom: '30px' }}>
        <p>不支持操作checkbox的时候改变treeData</p>
        <p>treeSelectable === false时，点击当前行就能操作checkbox</p>
      </div>
      <YmTree
        rootStyle={{ width: '300px', border: '#666 solid 1px' }}
        treeShowCheckableBox
        treeSelectable={false}
        treeData={treeData}
        defaultExpandAll
        // defaultExpandedKeys={['0-1']}
        // defaultCheckedKeys={['0-1', '0-1-1']}
        checkedKeys={checkedKeys}
        onCheck={handleCheck}
        // icon={<SmileOutlined />}
      />
    </div>
  );
}

export default CheckAble;
